<div class="random">
	<mat-toolbar class="spaceBetweenCenter">

		<div>
			<button (click)="generate(+addGenNb.value)" color="primary" mat-stroked-button>
				<span class="material-symbols-outlined notranslate">
					auto_mode
				</span>
				Generate rows
			</button>

			<mat-form-field style="width: 65px; text-align: right; margin-bottom: -0.5em;">
				<input #addGenNb matInput min="1" type="number" value="1">
			</mat-form-field>
		</div>

		<div>
			<mat-button-toggle-group
				id="docToggle"
				(change)="iframe = $event.value ? sanitizer.bypassSecurityTrustResourceUrl($event.value) : undefined">
				<mat-button-toggle value='https://ngneat.github.io/falso/docs/getting-started'>
					<img src="/assets/falso.png" />
					Falso
				</mat-button-toggle>
				<mat-button-toggle value='https://fakerjs.dev/api/'>
					<mat-icon svgIcon="faker"></mat-icon>
					FakerJS
				</mat-button-toggle>
				<mat-button-toggle value=''>
					⨉
				</mat-button-toggle>
			</mat-button-toggle-group>
		</div>

		<a href="https://docs.webdb.app/smart-data-generator"
		   mat-button
		   target="_blank">
			<span class="material-symbols-outlined notranslate">
				dictionary
			</span>
			Generator
		</a>
	</mat-toolbar>

	<div *ngIf="iframe"
		 style="height: 300px; display: flex; overflow: auto; resize: vertical;">
		<iframe [src]="iframe" style="border: none; min-height: 100%; width: 100%;"></iframe>
	</div>

	<mat-tab-group mat-align-tabs="center">
		<mat-tab
			*ngFor="let random of randomSource"
			[labelClass]="random.error ? 'tab-error': ''"
			[label]="random.column.name"
		>
			<div style="display: flex">

				<ngx-monaco-editor
					(onInit)="initEditor($event, random.column.name)"
					[(ngModel)]="random.model"
					[options]="editorOptions"
					style="flex: 1; resize: vertical">
				</ngx-monaco-editor>

				<div class="infos">
					<h2 style="color: #2196f3; text-align: center; overflow: auto; max-height: 120px; width: 260px;">
						{{ JSON.stringify(random.column.type).replaceAll('"', " ") }}
						<mat-divider></mat-divider>
					</h2>

					<button
						(click)="random.model = beautify('return undefined')"
						mat-stroked-button>
						<span class="material-symbols-outlined notranslate">
							check_box_outline_blank
						</span>
						Null / Default
					</button>

					<button
						(click)="sampleData(random, true)"
						color="accent"
						mat-stroked-button>
						<span class="material-symbols-outlined notranslate">
							attach_file
						</span>
						Foreign Key / Enum
					</button>

					<button
						(click)="random.model = beautify(random.model)"
						mat-stroked-button>
						<span class="material-symbols-outlined notranslate">
							format_indent_increase
						</span>
						Format code
					</button>

					<button
						[matMenuTriggerFor]="iaFrame"
						mat-flat-button>
						<span class="material-symbols-outlined notranslate">
							support_agent
						</span>
						AI suggestion
					</button>
					<mat-menu #iaFrame="matMenu" xPosition="before">
						<button (click)="iaCode(random, 'Falso')"
								mat-menu-item>
							Falso
						</button>
						<button (click)="iaCode(random, 'FakerJS')"
								mat-menu-item>
							FakerJS
						</button>
					</mat-menu>

					<button [matMenuTriggerFor]="example" mat-button>
						<span class="material-symbols-outlined notranslate">
							code
						</span>
						Example
					</button>
					<mat-menu #example="matMenu" xPosition="before">
						<button
							(click)="random.model = 'if (Math.random() < 0.3) {\n\treturn undefined;\n} else {\n\treturn \'70% probability\';\n}'"
							mat-menu-item>
							30% Null
						</button>
						<button (click)="random.model = 'return faker.address.streetAddress(true)'"
								mat-menu-item>
							Address
						</button>
						<button
							(click)="random.model = 'return allFakers.ar.person.firstName()'"
							mat-menu-item>
							Arabic Name
						</button>
						<button
							(click)="random.model = 'return Array(6).fill(null).map(() => faker.datatype.number())'"
							mat-menu-item>
							Array
						</button>
						<button (click)="random.model = 'return faker.datatype.datetime()'"
								mat-menu-item>
							DateTime
						</button>
						<button (click)="random.model = 'return faker.internet.email()'"
								mat-menu-item>
							Mail
						</button>
						<button (click)="random.model = 'return faker.datatype.number()'"
								mat-menu-item>
							Number
						</button>
						<button
							(click)="random.model = 'return {\n\tfirst_name: faker.name.firstName(),\n\tlast_name: faker.name.lastName(),\n\tsex: faker.name.sex()\n}'"
							mat-menu-item>
							Object
						</button>
						<button (click)="random.model = 'return faker.datatype.string()'"
								mat-menu-item>
							String
						</button>
						<button (click)="random.model = 'return Math.floor((new Date()).getTime() / 1000)'"
								mat-menu-item>
							Timestamp (in sec)
						</button>
					</mat-menu>
				</div>
			</div>

			<mat-error *ngIf="random.error" style="padding: 10px">{{ random.error }}</mat-error>
		</mat-tab>
	</mat-tab-group>
</div>

<div #scrollContainer class="result">
	<mat-toolbar class="spaceBetweenCenter">
		<div>
			<button (click)="addRows(+addRowNb.value)" mat-stroked-button>
				<span class="material-symbols-outlined notranslate">
					add
				</span>
				Empty rows
			</button>
			<mat-form-field style="width: 65px; text-align: right">
				<input #addRowNb
					   matInput
					   min="1"
					   type="number"
					   value="1">
			</mat-form-field>
		</div>

		<input #inputFile (change)="inputChange($event)" accept=".json, .csv" hidden="true" onclick="this.value=null"
			   type="file"/>
		<button (click)="inputFile.click()" mat-stroked-button>
			<span class="material-symbols-outlined notranslate">
				upload_file
			</span>
			Import CSV/JSON file
		</button>

		<button (click)="insert()"
				[disabled]="dataSource.data.length < 1"
				color="primary"
				mat-flat-button>
			<span class="material-symbols-outlined notranslate">
				note_add
			</span>
			Insert Rows
		</button>
	</mat-toolbar>

	<div class="scrollDiv mat-elevation-z8">
		<table [dataSource]="dataSource" class="table" mat-table range-selection>
			<ng-container
				*ngFor="let column of displayedColumns"
				matColumnDef="{{column}}"
			>
				<ng-container *ngIf="column === actionColum">
					<th *matHeaderCellDef mat-header-cell style="width: 0px;">
						<button (click)="removeRows()"
								[disabled]="selection.isEmpty()"
								color="warn"
								mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								delete
							</span>
						</button>
						<mat-checkbox
							(change)="$event ? toggleAllRows() : null"
							[checked]="selection.hasValue() && isAllSelected()"
							[indeterminate]="selection.hasValue() && !isAllSelected()"
							color="warn">
						</mat-checkbox>
					</th>
					<td *matCellDef="let row; let i = index"
						mat-cell>
						<button (click)="editRow(i, row)"
								color="primary"
								mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								edit
							</span>
						</button>
						<mat-checkbox
							(change)="$event ? selection.toggle(row) : null"
							(click)="$event.stopPropagation()"
							[checked]="selection.isSelected(row)"
							color="warn">
						</mat-checkbox>
					</td>
				</ng-container>
				<ng-container *ngIf="column !== actionColum">
					<th *matHeaderCellDef
						class="resizeColumn"
						[style.min-width]="column.length * 8 + 'px'"
						mat-header-cell>
						{{ column }}
					</th>
					<td *matCellDef="let row"
						[class.selected-row]="selection.isSelected(row)"
						mat-cell>
						<app-cell
							*ngIf="column !== actionColum"
							[column]="column"
							[stringify]="true"
							[value]="row[column]"
						></app-cell>
					</td>
				</ng-container>
			</ng-container>

			<tr *matHeaderRowDef="displayedColumns!; sticky: true" mat-header-row></tr>
			<tr *matRowDef="let row; columns: displayedColumns!;" mat-row></tr>
		</table>
	</div>
	<mat-paginator
		hidePageSize
		pageSize="100"
		showFirstLastButtons
	></mat-paginator>
</div>
